<template>
  <div class="mobileTab appBox">
    <div v-wechat-title='detailheaderTitle' v-show='false'> {{detailheaderTitle}} </div>
    <div class="flexColumn" style='background: none;' :class="$store.state.isMobile?'ismobileHeader':'pcHeader'">
      <div class="flexCenter" :class="$store.state.isMobile?'ismobileHeaderTitle':'pcHeaderTitle'">
        <div class="titleTab radio-group  flexCenter"
          style="background: none;margin-top: 0.18rem;margin-bottom: 0.2rem;">
          <p v-for="(tab, index) in tabs" :class="{ cur: iscur == index }" :key="index" class="Tabs flexCenter"
            @click="(iscur = index), tabChange('select' + (index + 1))">{{ tab.name }}</p>
        </div>
      </div>
    </div>
    <section class="detailBox">
      <div class="radio-wrap sectionContent">
        <div class="sectionTopBox">
          <component v-bind:is="tabView" :tab-view='tabView' :role-type="roleType" :detail-type='detailType' :obj="obj"></component>
        </div>
      </div>
      <div v-if='isXYFK && tabView=="select1"'
        style='margin:0.1rem 0.3rem;height:80%;color:#333;background-color: #fff;border-radius: 0.2rem;'
        class="flexColumnCenter">
        <img src="../../assets/img/FZZ1.png" alt="" style="width: 3rem;height: 3rem;margin-bottom: 0.2rem;">
        <p style="font-size:0.3rem">
          {{'信用付款' | getSelectName(name)}}
        </p>
      </div>
      <div v-if='isFXY && tabView=="select2"'
        style='margin:0.1rem 0.3rem;height: 80%;color:#333;background-color: #fff;border-radius: 0.2rem;'
        class="flexColumnCenter">
        <img src="../../assets/img/FZZ1.png" alt="" style="width: 3rem;height: 3rem;margin-bottom: 0.2rem;">
        <p style="font-size:0.3rem">
          {{'非信用付款' | getSelectName(name)}}
        </p>
      </div>
      <div v-if='isLJK && tabView=="select3"'
        style='margin:0.1rem 0.3rem;height: 80%;color:#333;background-color: #fff;border-radius: 0.2rem;'
        class="flexColumnCenter">
        <img src="../../assets/img/FZZ1.png" alt="" style="width: 3rem;height: 3rem;margin-bottom: 0.2rem;">
        <p style="font-size:0.3rem">
          {{'领借款' | getSelectName(name)}}
        </p>
      </div>
    </section>
  </div>
</template>
<script>
  import select1 from "./selectTabOne.vue";
  import select2 from "./selectTabTwo.vue";
  import select3 from "./selectTabThree.vue";
  export default {
    name: 'detail',
    components: {
      select1,
      select2,
      select3
    },
    data() {
      return {
        tabView: "select1",
        num: "1",
        iscur: 0,
        obj: {},
        detailheaderTitle: "",
        roleType: 0,
        detailType: 1,
        isZZ: 0,
        isXYFK: false,
        isFXY: false,
        isLJK: false,
        name: '我的',
        ZzTabs: [{ name: '转账', index: '0' }, { name: '非转账', index: '1' }],
        tabs: [{ name: "信用付款" }, { name: "非信用付款" }, { name: "领借款" }]
      };
    },
    filters: {
      getSelectName(name1, name) {
        let nameData = ''
        if (name == '我的') {
          nameData = '本月您没有' + name1 + '哦'
        } else if (name == '集团') {
          nameData = '本月' + name + '没有' + name1 + '哦'
        } else {
          nameData = '本月该' + name + '没有' + name1 + '哦'
        }
        return nameData
      }
    },
    created() {
      this.getDetail()
      this.roleType = this.$route.query.roleType;
      this.detailType = this.$route.query.detailType;
      if (this.roleType == 0) {
        this.$route.meta.title = '个人付款详情'
        this.detailheaderTitle = '个人付款详情'
        this.name = '我的'
      } else if (this.detailType == 1) {
        this.$route.meta.title = '个人付款详情'
        this.detailheaderTitle = '个人付款详情'
        this.name = '我的'
      } else if (this.roleType == 1 && this.detailType == 2) {
        this.$route.meta.title = '部门付款详情'
        this.detailheaderTitle = '部门付款详情'
        this.name = '部门'
      } else if (this.roleType == 2 && this.detailType == 2) {
        this.$route.meta.title = '地区付款详情'
        this.detailheaderTitle = '地区付款详情'
        this.name = '地区'
      } else if (this.roleType == 3 && this.detailType == 2) {
        this.$route.meta.title = '集团付款详情'
        this.detailheaderTitle = '集团付款详情'
        this.name = '集团'
      }
    },
    methods: {
      tabChange: function (tab) {
        this.tabView = tab;
      },
      getDetail() {
        this.$axios({
          method: "post",
          url: this.$api.detailsIntef,
          headers: { "Content-Type": "application/json" },
          data: {
            params: {
              access_token: this.$route.query.data,
              userCode: this.$route.query.userCode,
              yearv: this.$route.query.value[0],
              orgCode: this.$route.query.orgCode,
              orgName: this.$route.query.orgName,
              roleType: this.$route.query.roleType,
              detailType: this.$route.query.detailType,
              mon: this.$route.query.value[1],
              isZZ: this.$route.query.isZZ
            }
          }
        })
          .then(res => {
             if (res.data.dataList.ErrorCode === "000001") {
              if (this.$store.state.isMobile) {
                this.methodApi.AlertNoToken();
              } else {
                this.methodApi.pcAlertNoToken();
              }
            }
            if (res.data.dataList) {
              this.obj = res.data.dataList;
              if (!this.obj || !this.obj.creditpay.length) {
                this.isXYFK = true
              }
              if (!this.obj || !this.obj.checkpay.length) {
                this.isFXY = true
              }
              if (!this.obj || !this.obj.borrowpay.length) {
                this.isLJK = true
              }
            }
          })
          .catch(error => {
            this.isXYFK = true
            this.isFXY = true
            this.isLJK = true
            console.log(error, "home数据error");
          });
      },
      ZztabChange(tab) {
        this.isZZ = tab.index
        this.getDetail()
      },
    }
  };
</script>
<style lang="scss" scoped>
  @import "../../assets/css/mintui.css";

  .ZzTabDetail {
    height: 0.6rem;
    font-size: 0.32rem;
    color: #666;

    p {
      height: 100%;
    }

    p:first-child {
      margin-right: 1rem;
    }
  }

  .ZzTabDetail p.ZzTabBag {
    font-weight: 700;
    color: #5587F0;
    border-bottom: 2px solid #5587F0;
  }

  .mobileTab {
    .radio-group {
      color: #fff;
      font-size: 0.26rem;
    }

    .radio-group :last-child {
      border-radius: 0 0.16rem 0.16rem 0 !important;
    }

    .radio-group :first-child {
      border-radius: 0.16rem 0 0 0.16rem !important;
    }

    .Tabs {
      width: 1.8rem;
      height: 0.64rem;
      border: 2px solid #2F80ED;
    }

    .titleTab p:nth-child(2) {
      border-left: none;
      border-right: none;
    }

    .cur {
      background-color: #2F80ED;
      /* background-origin: padding-box, border-box;
      background-image: -moz-linear-gradient(90deg, #56B8FF, #4176E5), -moz-linear-gradient(-90deg, #56B8FF 0%, #4176E5 100%);
      background-image: -webkit-linear-gradient(90deg, #56B8FF, #4176E5), -webkit-linear-gradient(-90deg, #56B8FF 0%, #4176E5 100%);
      background-image: -o-linear-gradient(90deg, #56B8FF, #4176E5), -o-linear-gradient(-90deg, #56B8FF 0%, #4176E5 100%);
      background-image: linear-gradient(90deg, #56B8FF, #4176E5), linear-gradient(-90deg, #56B8FF 0%, #4176E5 100%);
      background-image: -ms-linear-gradient(90deg, #56B8FF, #4176E5);
      border: none; */
      /* height: 0.64rem; */
      color: #fff;
    }

    .selectOne {
      padding: 0.4rem;
      box-sizing: border-box;
      border-bottom: 0.5px solid #e2e2eb;
    }

    .selectOne:last-child {
      border-bottom: none;
    }

    .selectitle {
      color: #333;
      margin-bottom: 0.14rem;
      font-size: 0.34rem;
    }

    .content {
      display: flex;
      align-items: center;
      justify-content: space-between;

      p {
        margin-top: 0.18rem;
      }

      div:first-child .leftTitleName {
        margin-right: 0.6rem;
      }

      .leftTitleName {
        font-size: 0.26rem;
        color: #999;
      }
    }

    .selectOne p .payAmt {
      color: #999;
      font-weight: 700;
    }

    .content .leftDay {
      font-size: 0.26rem;
      color: #666;
    }

    .content .leftDayEn {
      text-align: right;
      font-size: 0.3rem;
      font-weight: 700;
      color: #666;
    }

    .content .flexEnd .rightDayEn {
      font-weight: 700;
    }

    .selectOne .rightDay {
      color: #999;
      font-size: 0.24rem;
    }

    .content .rightDay {
      color: #333;
      font-size: 0.24rem;
    }

    .content .rightDayEn {
      font-weight: 700;
      color: #333;
      font-size: 0.4rem;
    }
  }
</style>